<template>
    <div class="pice-select">
        <div class="direction" @click="previous" :class="{canClikc: clickRight}"><img src="@/assets/img/common/left.svg" alt=""></div>
        <div class="goods">
            <div class="goods-list" ref="goodsList" >
                <div class="goods-item" v-for="(item, index) in goodsImg" :key="index" @click="chooseImage(item.url)" :class="{isChoice: choiceUrl == item.url}"><img :src="item.url" alt=""></div>
            </div>
        </div>
        <div class="direction" @click="next" :class="{canClikc: this.goodsImg.length > 5 && this.goodsImg.length - 5 > this.clickTime}">
            <img src="@/assets/img/common/right.svg" alt="">
        </div>
    </div>
</template>

<script>
    export default {
        name: "DetailPiceSelect",
        props: {
            goodsImg: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        data() {
            return {
                clickRight: false,
                clickTime: 0,
                choiceUrl: ''
            }
        },
        computed: {

        },
        methods: {
            move(isLeft) {
                let eveyTime;
                let currentLeft;
                let size = 0
                if (isLeft) {
                    eveyTime = 4
                    currentLeft = 64
                } else {
                    eveyTime = -4
                    currentLeft = -64
                }
                let intervalID = setInterval(()=>{
                    if (size == currentLeft) {
                        clearInterval(intervalID)
                    } else {
                        if (this.$refs.goodsList.style.left) {
                            this.$refs.goodsList.style.left = (eveyTime + parseInt(this.$refs.goodsList.style.left)) + 'px'
                        }else {
                            this.$refs.goodsList.style.left = eveyTime + 'px'
                        }
                        size += eveyTime
                    }
                }, 20)
            },
            previous() {
                if (this.clickRight) {
                    this.move(true)
                    // console.log(this.$refs.goodsList.style.left)
                    this.clickTime--
                    if (this.$refs.goodsList.style.left == '-64px') { // 由于定时器异步原因 所以不可以为0 只能为-64px
                        this.clickRight = false
                    }
                } else {
                    return
                }

            },
            next() {
                if (this.goodsImg.length > 5 && this.goodsImg.length - 5 > this.clickTime) {
                    this.clickRight = true;
                    this.move(false);
                    this.clickTime++;
                } else {
                    return
                }
            },
            chooseImage(url) {
                this.choiceUrl = url
                this.$emit('chooseImage', url)
            }
        }
    }
</script>

<style scoped>
    .pice-select {
        display: flex;
        width: 420px;
        height: 54px;
        justify-content: space-between;
    }
    .direction, .goods-item {
        width: 52px;
        line-height: 54px;
        text-align: center;
    }
    .goods {
        flex: 1;
        overflow: hidden;
        position: relative;
    }
    .goods-list {
        display: flex;
        position: absolute;
        height: 54px;
    }
    .goods-item {
        border: 1px solid #ebebeb;
        flex-shrink: 0;
        margin: 0 5px;
    }
    img {
        width: 100%;
    }
    .direction {
        background-color: #eeeeee;
    }
    .canClikc {
        background-color: #303030;
    }
    .canClikc:hover {
        background-color: rgb(255,63,0);
    }
    .goods-list .isChoice {
        border: 1px solid rgb(255,63,0);
    }
</style>